<template>
  <div class="footer-box">
    <van-tabbar v-model="actives" class="footer" active-color="#2C8DFF" inactive-color="#2C2C2C">
      <van-tabbar-item to="/" name="home">
        <span style="color: #333">首页</span>
        <img slot="icon" class="icon" slot-scope="props" :src="$route.path=='/' ? home.active : home.inactive">
      </van-tabbar-item>

      <van-tabbar-item to="/buy" name="buy">
        <span style="color: #333">买车</span>
        <img slot="icon" class="icon" slot-scope="props" :src="$route.path=='/buy' ? car.active : car.inactive">
      </van-tabbar-item>

      <van-tabbar-item to="/relcar">
        <span class="pull-txt">发布</span>
        <div class="icon_pull">
          <div class="icon_pull_bg"></div>
          <img class="pull-img" src="@/assets/images/icon/pull.svg">
        </div>
      </van-tabbar-item>

      <van-tabbar-item name="svr" to="/service">
        <span style="color: #333">服务</span>
        <img slot="icon" class="icon" slot-scope="props" :src="$route.path=='/service' ? svr.active : svr.inactive">
      </van-tabbar-item>

      <van-tabbar-item name="user" to="/user">
        <span style="color: #333">我的</span>
        <img slot="icon" class="icon" slot-scope="props" :src="$route.path=='/user' ? user.active : user.inactive">
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
  export default {
    name: "Footer",
    components: {},
    data() {
      return {
        home:{
          active: require('@/assets/images/icon/home_par.svg'),
          inactive: require('@/assets/images/icon/home.svg')
        },
        car:{
          active: require('@/assets/images/icon/buy_car_par.svg'),
          inactive: require('@/assets/images/icon/buy_car.svg')
        },
        svr:{
          active: require('@/assets/images/icon/hard.svg'),
          inactive: require('@/assets/images/icon/hard_par.svg')
        },
        user:{
          active: require('@/assets/images/icon/user_par.svg'),
          inactive: require('@/assets/images/icon/user.svg')
        },
        actives:this.active
      }
    },
    props:['active'],
    computed: {},
    mounted: function () {

    },
    methods: {

    },
  }
</script>
